import React, { Component } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import { Card, Button, Icon, Input, message, Tag, Modal } from "antd";
import MarkdownEditor from "@/utils/vditor";
import { postGenerateQuestions, cancelKnowledgeCollect } from "@/services/knowledgeGather";

class AddFile extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isShowTitle: false,
			content: '',
			fileTitle: '',
			visible: false,
			btnLoading: false,
			perNumber: 10,
			cancelLoading: false,
		};
	}

	componentDidMount() { }

	getStr(str) {
		return str.match(/\n(?:[^\n])*/g, function (s) {
			return s;
		})
	}

	getStrHtml = (str) => {
		var v = (this.getStr(str)[0].replace(/\n(([\w])+)?n/g, function ($1, $2) {
			return $2;
		}).split(" "))[0];

		return this.getStr(str)[0] + "/n"
	}

	render() {
		const { match: { params: { id }, }, route, location: { params, query } } = this.props;
		const { isShowTitle, btnLoading, visible, cancelLoading } = this.state;

		return (
			<Card bordered={false}>
				<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '-8px 0 16px' }}>
					<Button onClick={this.backRouter} loading={cancelLoading}>取消采编</Button>
					<Button onClick={this.openModal} style={{ backgroundColor: "#FFFFFF", color: '#3E5BFF', borderColor: '#6478FF', marginRight: 10 }}>下一步生成问题</Button>
				</div>
				<MarkdownEditor
					value={this.state.content}
					title={this.state.fileTitle}
					name='markdown-editor'
					id='markdown-editor'
					height='500px'
					width='700'
					onChange={(value, type) => {
						switch (type) {
							case 'content':
								this.setState({ content: value });
								break;
							case 'title':
								this.setState({ fileTitle: value });
								break;
						}
					}}
					ref={(r) => (this.vEditor = r)}
				/>
				<Modal
					title={
						<span style={{ fontWeight: 'bold', fontSize: '18px' }}>根据当前范围生成问题</span>
					}
					visible={visible}
					centered
					closable={false}
					onOk={this.save}
					onCancel={this.cancel}
					footer={[
						<Button type="danger" onClick={this.cancel}>取消</Button>,
						<Button type="primary" loading={btnLoading} onClick={this.save}>下一步</Button>,
					]}
				>
					{/* <p>
						<span>预期生成问题总数&nbsp;&nbsp;&nbsp;</span>
						<Input style={{ width: '64px' }} />
					</p> */}
					<p>这个步骤耗时时间较长，需耐心等待</p>
					<p>
						<span>每500字生成问题&nbsp;&nbsp;&nbsp;</span>
						<Input style={{ width: '64px', color: '#faad14' }} value={this.state.perNumber} onChange={this.setCount} />
						<span>&nbsp;&nbsp;&nbsp;条</span>
					</p>
				</Modal>
			</Card>
		);
	}

	openModal = () => {
		const { content, fileTitle } = this.state;
		this.setState({ visible: true })
	}

	backRouter = () => {
		Modal.confirm({
			title: '确定取消当前文档的采编',
			okText: '确定',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				this.setState({ cancelLoading: true });
				let res = await cancelKnowledgeCollect();
				console.log(res);
				if (res.code === 0) {
					this.setState({ cancelLoading: false })
					const { dispatch } = this.props;
					let pathname = "/knowledgeDesign/knowledgeCollect";
					dispatch(routerRedux.push({ pathname }));
				} else {
					this.setState({ cancelLoading: false })
				}
			},
			onCancel() {
				console.log('取消操作！！！');
			},
		});
	}

	cancel = () => {
		this.setState({ visible: false, btnLoading: false })
	}

	setCount = e => {
		this.setState({ perNumber: e.target.value })
	}

	save = e => {
		e.stopPropagation();
        e.preventDefault();
		const { content, fileTitle, perNumber } = this.state;
		if (fileTitle == '' || fileTitle == null || fileTitle == undefined) {
			return message.error('请输入文档标题！');
		};
		if (content == '' || content == null || content == undefined) {
			return message.error('请输入文档内容！');
		};
		let obj = {
			type: 2,
			perNumber,
			docTitle: fileTitle,
			docContent: content,
			isAllChoose: true,
		};
		this.setState({ btnLoading: true }, async () => {
			let res = await postGenerateQuestions(obj);
			console.log(res);
			if (res.code == 0) {
				message.info(res.msg);
				this.setState({ btnLoading: false }, () => this.nextRouter());
			} else {
				this.setState({ btnLoading: false });
			}
		})
	}

	nextRouter = () => {
		const { dispatch } = this.props;
		let pathname = "/knowledgeDesign/knowledgeCollect/generateQuestion";
		dispatch(routerRedux.push({ pathname }));
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(AddFile);
